<template>
	<div>
		<!-- 父评论 -->
		<div class="parent">
			<!-- 父评论的父评论 -->
			<!-- 🔔 2. 根据组件名自己调用自己，如果还有父评论数据，继续调用自己 -->
			<ritem v-if="parent.parent" :parent="parent.parent" @parentreply="parentFn"></ritem>
			<div class="parent-header" @click="parentFn(parent)">
				<span>{{ parent.user.nickname }}</span>
				<span class="date">{{ parent.create_date | formatTime }}</span>
				<span class="reply">回复</span>
			</div>
			<div class="parent-body">
				{{ parent.content }}
			</div>
		</div>
	</div>
</template>

<script>
export default {
	// 🔔 1. 给组件自己起个名字
	name: "ritem",
	props: {
		parent: Object,
	},
	methods: {
		parentFn(parent) {
			// 需要传当前点击的parent的对象
			this.$emit("parentreply", parent);
		},
	},
};
</script>

<style lang="less" scoped>
.parent {
	border: 1px solid #ccc;
	padding: 5px;

	.parent-header {
		font-size: 12px;
		color: #999;
		display: flex;
		position: relative;
		z-index: 10;
		.date {
			margin-left: 10px;
			flex: 1;
		}
		// .reply {
		// 	position: relative;
		// 	z-index: 10;
		// }
	}
	.parent-body {
		font-size: 14px;
		margin: 5px 0;
	}
}
</style>
